<!--
 * @Date: 2023-03-15 14:44:17
 * @LastEditors: StavinLi 495727881@qq.com
 * @LastEditTime: 2023-05-24 15:20:48
 * @FilePath: /Workflow-Vue3/src/components/drawer/conditionDrawer.vue
-->

<template>
  <el-drawer
    :append-to-body="true"
    title="条件设置"
    v-model="visible"
    class="condition_copyer"
    :show-close="false"
    :size="550"
    :before-close="saveCondition"
  >
    <template #header="{ titleId, titleClass }">
      <h3 :id="titleId" :class="titleClass">条件设置</h3>
      <select v-model="conditionConfig.priorityLevel" class="priority_level">
        <option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">
          优先级{{ item }}
        </option>
      </select>
    </template>
    <div class="demo-drawer__content">
      <div class="condition_content drawer_content">
        <p class="tip">当审批单同时满足以下条件时进入此流程</p>
        <ul>
          <li v-for="(item, index) in conditionConfig.conditionList" :key="index">
            <span class="ellipsis">{{ item.type == 1 ? '发起人' : item.showName }}：</span>
            <div v-if="item.type == 1">
              <p
                :class="conditionConfig.nodeUserList.length > 0 ? 'selected_list' : ''"
                @click.self="addConditionRole"
                style="cursor: text"
              >
                <span v-for="(item1, index1) in conditionConfig.nodeUserList" :key="index1">
                  {{ item1.name
                  }}<img
                    src="../images/add-close1.png"
                    @click="$func.removeEle(conditionConfig.nodeUserList, item1, 'targetId')"
                  />
                </span>
                <input
                  type="text"
                  placeholder="请选择具体人员/角色/部门"
                  v-if="conditionConfig.nodeUserList.length == 0"
                  @click="addConditionRole"
                />
              </p>
            </div>
            <div v-else-if="item.columnType == 'String' && item.showType == 3">
              <p class="check_box">
                <a
                  :class="$func.toggleStrClass(item, item1.key) && 'active'"
                  @click="toStrChecked(item, item1.key)"
                  v-for="(item1, index1) in JSON.parse(item.fixedDownBoxValue)"
                  :key="index1"
                  >{{ item1.value }}</a
                >
              </p>
            </div>
            <div v-else>
              <p>
                <select
                  v-model="item.optType"
                  :style="'width:' + (item.optType == 6 ? 370 : 100) + 'px'"
                  @change="changeOptType(item)"
                >
                  <option v-for="{ value, label } in optTypes" :value="value" :key="value">
                    {{ label }}
                  </option>
                </select>
                <input
                  v-if="item.optType != 6"
                  type="text"
                  :placeholder="'请输入' + item.showName"
                  v-enter-number="2"
                  v-model="item.zdy1"
                />
              </p>
              <p v-if="item.optType == 6">
                <input
                  type="text"
                  style="width: 75px"
                  class="mr_10"
                  v-enter-number="2"
                  v-model="item.zdy1"
                />
                <select style="width: 60px" v-model="item.opt1">
                  <option v-for="{ value, label } in opt1s" :value="value" :key="value">
                    {{ label }}
                  </option>
                </select>
                <span
                  class="ellipsis"
                  style="display: inline-block; width: 60px; vertical-align: text-bottom"
                  >{{ item.showName }}</span
                >
                <select style="width: 60px" class="ml_10" v-model="item.opt2">
                  <option v-for="{ value, label } in opt1s" :value="value" :key="value">
                    {{ label }}
                  </option>
                </select>
                <input type="text" style="width: 75px" v-enter-number="2" v-model="item.zdy2" />
              </p>
            </div>
            <a
              v-if="item.type == 1"
              @click="
                ((conditionConfig.nodeUserList = []),
                $func.removeEle(conditionConfig.conditionList, item, 'columnId'))
              "
              >删除</a
            >
            <a
              v-if="item.type == 2"
              @click="$func.removeEle(conditionConfig.conditionList, item, 'columnId')"
              >删除</a
            >
          </li>
        </ul>
        <el-button type="primary" @click="addCondition">添加条件</el-button>
        <el-dialog
          title="选择条件"
          v-model="conditionVisible"
          :width="480"
          append-to-body
          class="condition_list"
        >
          <p>请选择用来区分审批流程的条件字段</p>
          <p class="check_box">
            <a
              :class="$func.toggleClass(conditionList, { columnId: 0 }, 'columnId') && 'active'"
              @click="$func.toChecked(conditionList, { columnId: 0 }, 'columnId')"
              >发起人</a
            >
            <a
              v-for="(item, index) in conditions"
              :key="index"
              :class="$func.toggleClass(conditionList, item, 'columnId') && 'active'"
              @click="$func.toChecked(conditionList, item, 'columnId')"
              >{{ item.showName }}</a
            >
          </p>
          <template #footer>
            <el-button @click="conditionVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureCondition">确 定</el-button>
          </template>
        </el-dialog>
      </div>
      <employees-role-dialog
        v-model:visible="conditionRoleVisible"
        :data="checkedList"
        @change="sureConditionRole"
        :isDepartment="true"
      />
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCondition">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, watch, computed, inject } from 'vue'
import $func from '../utils/index'
import { optTypes, opt1s } from '../utils/const'
// 移除直接导入的getConditions，改为使用注入的API配置
import employeesRoleDialog from '../dialog/employeesRoleDialog.vue'

const props = defineProps({
  internalState: {
    type: Object,
    default: null,
  },
})

const conditionVisible = ref(false)
const conditionsConfig = ref({
  conditionNodes: [],
})
const conditionConfig = ref({})
const PriorityLevel = ref('')
const conditions = ref([])
const conditionList = ref([])
const checkedList = ref([])
const conditionRoleVisible = ref(false)

// 获取内部状态管理或使用全局store作为fallback
const flowDesignerState = inject('flowDesignerState', null)
// 使用内部状态管理
const state = flowDesignerState.state
const actions = flowDesignerState.actions
const { apiConfig } = flowDesignerState

const conditionsConfig1 = computed(() => state.conditionsConfig1)
const conditionDrawer = computed(() => state.conditionDrawer)
const visible = computed({
  get() {
    return conditionDrawer.value
  },
  set() {
    closeDrawer()
  },
})
watch(conditionsConfig1, (val) => {
  conditionsConfig.value = val.value
  PriorityLevel.value = val.priorityLevel
  conditionConfig.value = val.priorityLevel
    ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
    : { nodeUserList: [], conditionList: [] }
})

/**
 * 改变操作类型时更新条件值
 * @param {Object} item - 条件项
 * @description 当操作类型为1时,设置zdy1为2
 * 其他情况下设置zdy1为1,zdy2为2
 */
const changeOptType = (item) => {
  if (item.optType == 1) {
    item.zdy1 = 2
  } else {
    item.zdy1 = 1
    item.zdy2 = 2
  }
}
const toStrChecked = (item, key) => {
  const a = item.zdy1 ? item.zdy1.split(',') : []
  const isIncludes = $func.toggleStrClass(item, key)
  if (!isIncludes) {
    a.push(key)
    item.zdy1 = a.toString()
  } else {
    removeStrEle(item, key)
  }
}
const removeStrEle = (item, key) => {
  const a = item.zdy1 ? item.zdy1.split(',') : []
  let includesIndex
  a.map((item, index) => {
    if (item == key) {
      includesIndex = index
    }
  })
  a.splice(includesIndex, 1)
  item.zdy1 = a.toString()
}
const addCondition = async () => {
  conditionList.value = []
  conditionVisible.value = true
  if (!apiConfig.getConditions) {
    console.warn('getConditions API function not provided')
    conditions.value = []
    return
  }
  const { data } = await apiConfig.getConditions({ tableId: 1 })
  conditions.value = data
  if (conditionConfig.value.conditionList) {
    for (let i = 0; i < conditionConfig.value.conditionList.length; i++) {
      var { columnId } = conditionConfig.value.conditionList[i]
      if (columnId == 0) {
        conditionList.value.push({ columnId: 0 })
      } else {
        conditionList.value.push(
          conditions.value.filter((item) => {
            return item.columnId == columnId
          })[0],
        )
      }
    }
  }
}
const sureCondition = () => {
  //1.弹窗有，外面无+
  //2.弹窗有，外面有不变
  for (let i = 0; i < conditionList.value.length; i++) {
    const { columnId, showName, columnName, showType, columnType, fixedDownBoxValue } =
      conditionList.value[i]
    if (
      $func.toggleClass(conditionConfig.value.conditionList, conditionList.value[i], 'columnId')
    ) {
      continue
    }
    if (columnId == 0) {
      conditionConfig.value.nodeUserList = []
      conditionConfig.value.conditionList.push({
        type: 1,
        columnId: columnId,
        showName: '发起人',
      })
    } else {
      if (columnType == 'Double') {
        conditionConfig.value.conditionList.push({
          showType: showType,
          columnId: columnId,
          type: 2,
          showName: showName,
          optType: '1',
          zdy1: '2',
          opt1: '<',
          zdy2: '',
          opt2: '<',
          columnDbname: columnName,
          columnType: columnType,
        })
      } else if (columnType == 'String' && showType == '3') {
        conditionConfig.value.conditionList.push({
          showType: showType,
          columnId: columnId,
          type: 2,
          showName: showName,
          zdy1: '',
          columnDbname: columnName,
          columnType: columnType,
          fixedDownBoxValue: fixedDownBoxValue,
        })
      }
    }
  }
  //3.弹窗无，外面有-
  for (let i = conditionConfig.value.conditionList.length - 1; i >= 0; i--) {
    if (
      !$func.toggleClass(conditionList.value, conditionConfig.value.conditionList[i], 'columnId')
    ) {
      conditionConfig.value.conditionList.splice(i, 1)
    }
  }
  conditionConfig.value.conditionList.sort(function (a, b) {
    return a.columnId - b.columnId
  })
  conditionVisible.value = false
}
const saveCondition = () => {
  closeDrawer()
  // const a = conditionsConfig.value.conditionNodes.splice(PriorityLevel.value - 1, 1) //截取旧下标
  // conditionsConfig.value.conditionNodes.splice(conditionConfig.value.priorityLevel - 1, 0, a[0]) //填充新下标
  // conditionsConfig.value.conditionNodes.map((item, index) => {
  //   item.priorityLevel = index + 1
  // })
  // for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
  //   conditionsConfig.value.conditionNodes[i].error =
  //     $func.conditionStr(conditionsConfig.value, i) == '请设置条件' &&
  //     i != conditionsConfig.value.conditionNodes.length - 1
  // }
  conditionConfig.value.error =
    $func.conditionStr(conditionsConfig.value, conditionConfig.value.priorityLevel - 1) ==
      '请设置条件' &&
    conditionConfig.value.priorityLevel != conditionsConfig.value.conditionNodes.length - 1
  actions.setConditionsConfig({
    value: conditionsConfig.value,
    flag: true,
    id: conditionsConfig1.value.id,
  })
}
const addConditionRole = () => {
  conditionRoleVisible.value = true
  checkedList.value = conditionConfig.value.nodeUserList
}
const sureConditionRole = (data) => {
  conditionConfig.value.nodeUserList = data
  conditionRoleVisible.value = false
}
const closeDrawer = () => {
  actions.setCondition(false)
}
</script>
<style lang="less">
.condition_copyer {
  .priority_level {
    position: absolute;
    top: 11px;
    right: 30px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
    font-size: 12px;
  }

  .condition_content {
    padding: 20px 20px 0;

    p.tip {
      margin: 20px 0;
      width: 510px;
      text-indent: 17px;
      line-height: 45px;
      background: rgba(241, 249, 255, 1);
      border: 1px solid rgba(64, 163, 247, 1);
      color: #46a6fe;
      font-size: 14px;
    }

    ul {
      max-height: 500px;
      overflow-y: scroll;
      margin-bottom: 20px;

      li {
        & > span {
          float: left;
          margin-right: 8px;
          width: 70px;
          line-height: 32px;
          text-align: right;
        }

        & > div {
          display: inline-block;
          width: 370px;

          & > p:not(:last-child) {
            margin-bottom: 10px;
          }
        }

        &:not(:last-child) > div > p {
          margin-bottom: 20px;
        }

        & > a {
          float: right;
          margin-right: 10px;
          margin-top: 7px;
        }

        select,
        input {
          width: 100%;
          height: 32px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          border: 1px solid rgba(217, 217, 217, 1);
        }

        select + input {
          width: 260px;
        }

        select {
          margin-right: 10px;
          width: 100px;
        }

        p.selected_list {
          padding-left: 10px;
          border-radius: 4px;
          min-height: 32px;
          border: 1px solid rgba(217, 217, 217, 1);
          word-break: break-word;
        }

        p.check_box {
          line-height: 32px;
        }
      }
    }

    .el-button {
      margin-bottom: 20px;
    }
  }
}

.condition_list {
  .el-dialog__body {
    padding: 16px 26px;
  }

  p {
    color: #666666;
    margin-bottom: 10px;

    & > .check_box {
      margin-bottom: 0;
      line-height: 36px;
    }
  }
}
</style>
